<template>
  <div>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary" @click="toarticleCreate"
        >发布疫情资讯</el-button
      >
    </div>

    <!-- 表格 -->
    <!-- {{articles}} -->
    <el-table :data="articles.list">
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="发布时间" prop="publishTime"></el-table-column>
      <el-table-column label="阅读次数" prop="readTimes"></el-table-column>
      <el-table-column label="所属分类" prop="category.name"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <!-- 作用域插槽 -->
        <template slot-scope="scope">
          <el-button @click="toDelete(scope.row)" type="danger" size="mini">删除</el-button>
          <el-button @click="toEdit(scope.row)" type="primary" size="mini">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination 
    background
    style="text-align: center"
    @current-change="currentChange"   
    layout="prev, pager, next" 
    :current-page="articles.page"
    :page-size="articles.pageSize"
    :total="articles.total">

    </el-pagination>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      articles: { list: [] },
      param: {
        page: 1,
        pageSize: 3, //将参数信息维护到data中,使其容易改变
      },
    };
  },

  methods: {
    //当前页发生变化
    currentChange(page){
        this.param.page = page;
        this.loadArticles();
    },



    //跳转到编辑页面
    toEdit(row) {
      this.$router.push({
        path: "/cms/article_create",
        query: row, //携带参数
      });
    },

    loadArticles() {
      let url = "http://121.199.29.84:8002/article/pageQuery";
      get(url, this.param).then((resp) => {
        this.articles = resp.data;
      });
    },

    toarticleCreate() {
      //跳转到资讯发布页面
      this.$router.push({
        path: "/cms/article_create",
      });
    },

    toDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //alert(JSON.stringify(row)); 将json对象转换成为字符串
        let url = "http://121.199.29.84:8002/article/deleteById";
        get(url, { id: row.id }).then((resp) => {
          // 提示删除成功
          this.$message({ type: "success", message: resp.message });
          // 重新加载数据
          this.loadArticles();
        });
      });
    },
  },

  mounted() {
    //加载数据
    this.loadArticles();
  },
};
</script>

<style scoped>
</style>